<template>
  <div style="margin: -21px -20px 0px -20px" class="Afont">
    <el-carousel indicator-position="outside" height="600px">
      <el-carousel-item v-for="item in zmd_limit" :key="item">
        <div>
          <el-image
            fit="fill"
            :src="`http://localhost:8000${item.image}`"
            class="zmdimg"
            :item="item"
          ></el-image>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div style="text-align: center; margin: 20px 40px">
    <h2 class="Afont" style="font-size: 24px; color: #e41a1a">热门运动项目</h2>
  </div>
  <div style="margin: 20px 40px" class="Afont">
    <el-row :gutter="20">
      <el-col
        :span="6"
        class="icon-container"
        style="text-align: center"
        @click="navigateToType('篮球')"
        @mouseover="highlight"
        @mouseleave="resetHighlight"
      >
        <el-icon @mouseover="rotateIcon" @mouseleave="resetIcon">
          <img
            src="@/assets/basketball.png"
            class="icon"
            style="height: 30px; width: 30px"
          />
        </el-icon>
        <div class="label">篮球</div>
      </el-col>
      <el-col
        :span="6"
        class="icon-container"
        style="text-align: center"
        @click="navigateToType('羽毛球')"
        @mouseover="highlight"
        @mouseleave="resetHighlight"
      >
        <el-icon @mouseover="rotateIcon" @mouseleave="resetIcon">
          <img
            src="@/assets/badminton.png"
            class="icon"
            style="height: 30px; width: 30px"
          />
        </el-icon>
        <div class="label">羽毛球</div>
      </el-col>
      <el-col
        :span="6"
        class="icon-container"
        style="text-align: center"
        @click="navigateToType('乒乓球')"
        @mouseover="highlight"
        @mouseleave="resetHighlight"
      >
        <el-icon @mouseover="rotateIcon" @mouseleave="resetIcon">
          <img
            src="@/assets/tabletennes.jpg"
            class="icon"
            style="height: 30px; width: 30px"
          />
        </el-icon>
        <div class="label">乒乓球</div>
      </el-col>
      <el-col
        :span="6"
        class="icon-container"
        style="text-align: center"
        @click="navigateToType('排球')"
        @mouseover="highlight"
        @mouseleave="resetHighlight"
      >
        <el-icon @mouseover="rotateIcon" @mouseleave="resetIcon">
          <img
            src="@/assets/volleyball.png"
            class="icon"
            style="height: 30px; width: 30px"
          />
        </el-icon>
        <div class="label">排球</div>
      </el-col>
    </el-row>
  </div>
  <div
    style="
      margin: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    "
  >
    <h2 style="font-size: 25px; color: #646464">场馆推荐</h2>
    <div style="margin: 20px 40px; text-align: center;">
      <el-button type="primary" @click="showAnnouncement">查看公告</el-button>
    </div>
    <el-link type="primary" @click="Jumpmore">更多</el-link>
  </div>
  <el-descriptions :column="1" border style="margin: 8px 40px"></el-descriptions>
  <div style="margin: 45px 40px">
    <el-row :gutter="10">
      <template v-for="item in positionList">
        <el-col :span="6" style="margin-bottom: 20px">
          <position-card :item="item"></position-card>
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import PositionCard from "@/components/PositionCard.vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";

const positionList = ref([]);
const router = useRouter();
const zmd_limit = ref();

const announcementContent = ref("");

function showAnnouncement() {
  fetchAnnouncement().then(() => {
    ElMessageBox.alert(announcementContent.value, "公告", {
      confirmButtonText: "确定",
      dangerouslyUseHTMLString: true,
      customClass: "announcement-box",
      callback: () => {
        console.log("公告已关闭");
      },
    });
  });
}

async function fetchAnnouncement() {
  try {
    const response = await axios.get("http://localhost:8000/Announcement/getLatest");
    announcementContent.value = response.data.content;
  } catch (error) {
    console.error("Error fetching announcement:", error);
  }
}

function Jumpmore() {
  router.push({ name: "Type" });
}

function navigateToType(type) {
  router.push({ name: "Type", query: { yard_type: type } });
}

onMounted(async () => {
  await getPositionList();
});

const getPositionList = async () => {
  try {
    const response = await axios.get("http://localhost:8000/YardInfo/getYardList1");
    positionList.value = response.data;
  } catch (error) {
    console.error("Error fetching yard list:", error);
  }
};

function rotateIcon(event) {
  event.target.style.transition = "none";
  event.target.style.transform = "rotateY(0deg)";
  setTimeout(() => {
    event.target.style.transition = "transform 1s";
    event.target.style.transform = "rotateY(720deg)";
  }, 10);
}

function resetIcon(event) {
  event.target.style.transform = "rotateY(0deg)";
}

function highlight(event) {
  const container = event.currentTarget;
  container.querySelector(".icon").style.boxShadow =
    "0 0 10px rgba(0, 0, 0, 0.5)";
  container.querySelector(".label").style.color = "#e41a1a";
}

function resetHighlight(event) {
  const container = event.currentTarget;
  container.querySelector(".icon").style.boxShadow = "none";
  container.querySelector(".label").style.color = "";
}

onMounted(async () => {
  getzmd_limit();
});

const getzmd_limit = async (limit = 4) => {
  const res = await axios.get(`http://localhost:8000/YardInfo/zmd?limit=${limit}`);
  zmd_limit.value = res.data;
};
</script>

<style scoped>
.announcement-box .el-message-box__wrapper {
  max-width: 600px;
}
.announcement-box .el-message-box {
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.announcement-box .el-message-box__header {
  background-color: #e41a1a;
  color: #fff;
  padding: 15px;
  font-size: 18px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.announcement-box .el-message-box__content {
  padding: 20px;
  font-size: 16px;
  color: #333;
}
.icon {
  display: inline-block;
  transition: transform 1s, box-shadow 0.3s;
}
.icon-container .label {
  transition: color 0.3s;
}
.zmdimg {
  position: relative;
  top: -310px;
}
.Afont {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.el-link {
  margin-right: 8px;
}
</style>
